<!--
	地震灾害现场调查与烈度评估
	Created by Penglei on 2023/08/08
-->
<template>
	<div ref="systemSelectRef" class="system-select" :style="props.styles">
		<div class="system-select-content" @click="onClick()">
			<div class="system-select-title">系统</div>
		</div>
		<div v-show="showPanel" ref="systemPanelRef" class="system-select-panel">
			<ul class="system-list">
				<router-link v-for="(item, index) in systemList" :key="index" :to="item.path || '/'">
					<li class="system-list-item" v-html="item.title || ''" :title="item.title"></li>
				</router-link>
			</ul>
		</div>
	</div>
</template>

<script setup name="SystemSelect">
import { getCurrentInstance, onMounted, ref } from "vue";

// 当前对象实例
const proxy = getCurrentInstance();
// 父组件传参
const props = defineProps({
	styles: {
		required: false,
		type: Object,
		default: {
			position: 'relative',
			top: '0',
			left: '42px',
		}
	}
});

// 系统列表
const systemList = [
	{ title: '首页', path: '/' },
	{ title: '全国地震灾害风险区划图', path: '/riskZonation' },
	{ title: '全国设定地震灾害损失分布图', path: '/disasterLosses' },
	{ title: '全国地震地质灾害评估', path: '/geologicalDisaster' },
	{ title: '全国地震灾害损失评估结果', path: '/lossAssessment' },
	{ title: '全国重大活动安保事件分布图', path: '/securityActivity' },
	// { title: '地震灾害现场调查与烈度评定', path: '/intensityAssessment' },
	{ title: '全国承灾体易损性数据', path: '/vulnerability' },
	{ title: '全国房屋设施数据', path: '/housingFacilities' },
	{ title: '全国地震安全性评价项目和钻孔位置分布图', path: '/projectDrill' },
	{ title: '全国房屋加固改造信息', path: '/buildHouse' },
	{ title: '全国活动断层分布图', path: '/activeFault' },
	{ title: '全国基础数据分布图', path: '/basicData' },
];

// 是否显示列表面板
let showPanel = ref(false);
// 图标按钮点击事件
const onClick = (e) => {
	if (showPanel.value) {
		// 关闭面板
		close();
	} else {
		// 显示面板
		open();
	}
}
// 显示面板
const open = () => {
	showPanel.value = true;
}
// 关闭面板
const close = () => {
	showPanel.value = false;
}

// 挂载完成
onMounted(() => {
	// 点击事件监听
	document.addEventListener('click', (e) => {
		if (proxy.refs.systemSelectRef) {
			let isSelf = proxy.refs.systemSelectRef.contains(e.target)
			if (!isSelf) {
				// 关闭面板方法
				close();
			}
		}
	})
})
</script>

<style scoped lang="scss">
.system-select {
	position: relative;
	z-index: 999;
	font-size: 14px;
	width: 320px;

	// 图标
	&-content {
		cursor: pointer;
		position: relative;
		width: 90px;
		height: 92px;
		// opacity: 0.5;
		background: url('@/assets/images/common/system.png') no-repeat center;
		background-size: 100% 100%;

		.system-select-title {
			width: 100%;
			text-align: center;
			color: #FFFFFF;
			line-height: 20px;
			position: absolute;
			bottom: 0;
		}
	}

	// 面板
	&-panel {
		width: 350px;
		min-height: 460px;
		padding: 26px;
		background: url('@/assets/images/common/bg_system_select.png') no-repeat center;
		background-size: 100% 100%;
		opacity: 1;

		.system-list {
			padding: 10px 0;
			margin: 0;
			color: #FFFFFF;

			&-item {
				padding: 0 15px;
				height: 32px;
				line-height: 32px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&-item:hover {
				background: linear-gradient(180deg, #0A076C 0%, #1B35B9 49%, #0A076C 100%);
				border: 1px solid #46FFFF;
				color: #46FFFF;
			}
		}
	}
}
</style>